<template>
	<view class="w-audio">
		<view class="audio-wrapper" :style="{display:is_show_time?'flex':'none'}">
			<!--<view class="audio-number">{{format(current)}}</view>
			<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value" @change="audio.seek($event.detail.value)"></slider>
			<view class="audio-number">{{format(duration)}}</view>-->
		</view>
		<view class="audio-control-wrapper" :style="{color}">
			<!--<view class="audio-control audio-control-prev" v-if="control" :style="{borderColor:color}" @click="prev">&#xe601;</view>
			<view class="audio-control audio-control-switch" :class="{audioLoading:loading}" :style="{borderColor:color}" @click="audio.paused?play():audio.pause()">{{loading?'&#xe600;':(paused?'&#xe865;':'&#xe612;')}}</view>
			<view class="audio-control audio-control-next" v-if="control" :style="{borderColor:color}" @click="next">&#xe601;</view>-->

			<view class="imt-audio">
                <view class="audio-control-wrapper" :style="{color}">
                    <!--重播-->
                    <view class="audio-box" v-if="control"  @click="replay">
                        <view class="audio-control audio-control-replay icons icon-zhongbo"
                              :style="{backgroundColor:bgcolor,boxShadow:boxs,borderColor:bgcolor}"></view>
                        <text class="audio-txt">重播</text>
                    </view>
                    <!--上一个-->
                    <view class="audio-box" v-if="control"  @click="prev">
                        <view class="audio-control audio-control-prev icons icon-shipinbofangshangyige"
                              :style="{backgroundColor:bgcolor,boxShadow:boxs,borderColor:bgcolor}"></view>
                        <text class="audio-txt">上一个</text>
                    </view>
                    <!--播发/暂停/加载-->
                    <view class="audio-control audio-control-switch icons"
                          :class="loading?'icon-jiazai audioLoading':(paused?'icon-bofang1':'icon-bofang')"
                          :style="{backgroundColor:bgcolor2,boxShadow:boxs,color:fontcolor,borderColor:bgcolor2}"
							@click="audio.paused?play():audio.pause()"></view>
                    <!--下一个-->
                    <view class="audio-box" v-if="control"  @click="next">
                        <view class="audio-control audio-control-next icons icon-xiayige"
                              :style="{borderColor:bgcolor,boxShadow:boxs,borderColor:bgcolor}" ></view>
                        <text class="audio-txt">下一个</text>
                    </view>
                    <!--返回目录-->
                    <view class="audio-box" v-if="control"  @click="directory">
                        <view class="audio-control audio-control-catalog icons icon-fuwumulu"
                              :style="{backgroundColor:bgcolor,boxShadow:boxs,borderColor:bgcolor}" ></view>
                        <text class="audio-txt">返回目录</text>
                    </view>
                </view>
            </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				audio: uni.createInnerAudioContext(),
				current: 0, //当前进度(s)
				duration: 0, //总时长(s)
				paused: true, //是否处于暂停状态
				loading: false, //是否处于读取状态
				seek: false, //是否处于拖动状态
			}
		},
		props: {
			src: String, //音频链接
			autoplay: Boolean, //是否自动播放
            continue: Boolean, //播放完成后是否继续播放下一首，需定义@next事件
			control: {
				type: Boolean,
				default: true
			}, //是否需要上一曲/下一曲按钮
			is_show_time:{
				type: Boolean,
				default: false
			}, //是否显示时间进度
			color: {
				type: String,
				default: '#30b0ab'
			}, //主色调
			bgcolor: {
				type: String,
				default: '#fff'
			}, //播放按钮颜色
			fontcolor: {
				type: String,
				default: '#fff'
			}, //字体颜色
			bgcolor2: {
				type: String,
				default: '#30b0ab'
			}, //按钮颜色
			boxs: {
				type: String,
				default: '0 0 6rpx rgba(0,0,0,.3)'
			}, //盒子
		},
		methods: {
			//replay重播
			replay() {
				if (this.src) {
					this.audio.src = this.src
					this.autoplay && this.play()
				}
				this.audio.obeyMuteSwitch = false
				//音频进度更新事件
				this.audio.onTimeUpdate(() => {
					if (!this.seek) {
						this.current = this.audio.currentTime
					}
					if (!this.duration) {
						this.duration = this.audio.duration
					}
				})
				//音频播放事件
				this.audio.onPlay(() => {
					this.paused = false
					this.loading = false
				})
				//音频暂停事件
				this.audio.onPause(() => {
					this.paused = true
				})
				//音频结束事件
				this.audio.onEnded(() => {
					if (this.continue) {
						this.next()
					} else {
						this.paused = true
						this.current = 0
					}
				})
				//音频完成更改进度事件
				this.audio.onSeeked(() => {
					this.seek = false
				})
			},
			//返回prev事件
			prev() {
				this.$emit('prev')
			},
			//返回next事件
			next() {
				this.$emit('next')
			},
			//返回列表
			directory() {
				this.$emit('directory')
			},
			//格式化时长
			/*format(num) {
				return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(Math.floor(num % 60)).length) + Math.floor(num % 60)
			},*/
			//点击播放按钮
			play() {
				this.audio.play()
				this.loading = true
			}
		},
		created() {
			if (this.src) {
				this.audio.src = this.src
				this.autoplay && this.play()
			}
			this.audio.obeyMuteSwitch = false
			//音频进度更新事件
			this.audio.onTimeUpdate(() => {
				if (!this.seek) {
					this.current = this.audio.currentTime
				}
				if (!this.duration) {
					this.duration = this.audio.duration
				}
			})
			//音频播放事件
			this.audio.onPlay(() => {
				this.paused = false
				this.loading = false
			})
			//音频暂停事件
			this.audio.onPause(() => {
				this.paused = true
			})
			//音频结束事件
			this.audio.onEnded(() => {
				if (this.continue) {
					this.next()
				} else {
					this.paused = true
					this.current = 0
				}
			})
			//音频完成更改进度事件
			this.audio.onSeeked(() => {
				this.seek = false
			})
		},
		beforeDestroy(){
			this.audio.destroy()
		},
		watch: {
			src(src, old) {
				this.audio.src = src
				this.current = 0
				this.duration = 0
				if (old || this.autoplay) {
					this.play()
				}
			}
		}
	}
</script>

<style>
	.w-audio {
		padding: 30upx 0;
		border-radius: 20upx;
	}

	.audio-wrapper {
		display: flex;
		align-items: center;
	}

	.audio-number {
		width: 120upx;
		font-size: 24upx;
		line-height: 1;
		color: #333;
		text-align: center;
	}

	.audio-slider {
		flex: 1;
		margin: 0;
	}
	.imt-audio {
		margin-bottom: 60rpx;

	}
	.audio-wrapper {
		display: flex;
		align-items: center;
	}

	.audio-number {
		width: 120upx;
		font-size: 24upx;
		line-height: 1;
		color: #333;
		text-align: center;
	}

	.audio-slider {
		flex: 1;
		margin: 0;
	}

	.audio-control-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "icon" !important;
	}
	.audio-box{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.audio-control {
		font-size: 32upx;
		line-height: 1;
		border: 4upx solid;
		border-radius: 50%;
		padding: 16upx;
	}

	.audio-control-replay, .audio-control-prev, .audio-control-next, .audio-control-switch, .audio-control-catalog{
		margin: 0 30upx;
	}

	.audio-control-switch {
		font-size: 50upx;
		padding: 20upx;
		margin-bottom: 32rpx;
	}
	.audio-txt{
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #666;
		font-weight: bold;
	}

	.audioLoading {
		animation: loading 2s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	@keyframes loading {
		to {
			transform: rotate(360deg);
		}
	}
</style>
